<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        #app>div {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
            border: 1px solid lightgray;
            box-shadow: 0 0 10px;
        }
    </style>
</head>
<body>
    <!--
        常见事件有如下：
        click               单击事件，组件被单击时触发               大部分的HTML元素
        dblclick            双击事件，组件被双击时触发               大部分的HTML元素
        focus               获取焦点事件，组件获得焦点时触发          input,select,textarea...
        blur                失去焦点事件，组件失去焦点时触发          input,select,textarea...
        change              元素内容改变事件，组件内容改变时触发      input,select,textarea...
        select              元素内容选中事件，组件内容选中时触发      input,select,textarea...
        mousedown           鼠标按下事件，鼠标按下时触发             大部分的HTML元素
        mouseup             鼠标抬起事件，鼠标抬起时触发             大部分的HTML元素
        mousemove           鼠标移动事件，鼠标移动时触发             大部分的HTML元素
        keydown             键盘按下事件，键盘按下时触发             HTML中所有表单元素
        keyup               键盘抬起事件，键盘抬起时触发             HTML中所有表单元素
        对于每一种类型的事件，我们可以通过Event对象来获取事件的具体信息。
        比如：鼠标单击事件，可以获取到用户具体单击的是左键还是右键
    -->
    <div id="app">
        <div @click="click">单击事件</div>
        <div @dblclick="dblclick">双击事件</div>
        <div style="height:50px">
            输入框焦点内容变更及选择：<input @focus="focus" @blur="blur" @change="change" @select="select"/>
        </div>
        <div @mousedown="mousedown">鼠标按下</div>
        <div @mouseup="mouseup">鼠标抬起</div>
        <div @mousemove="mousemove">鼠标移动</div>
        <div @mouseover="mouseout" @mouseout="mouseover">鼠标移入移出</div>
        <div style="height:50px">
            键盘按键按下或抬起：<input @keydown="keydown" @keyup="keyup"/>
        </div>
    </div>
<script>
    const {createApp} = Vue
    const config = {
        setup() {
            const click = () => {
                console.log('单击事件')
            }
            const dblclick = () => {
                console.log('双击事件')
            }
            const focus = () => {
                console.log('获取焦点事件')
            }
            const blur = () => {
                console.log('失去焦点事件')
            }
            const change = () => {
                console.log('内容改变事件')
            }
            const select = () => {
                console.log('内容选中事件')
            }
            const mousedown = () => {
                console.log('鼠标按下事件')
            }
            const mouseup = () => {
                console.log('鼠标抬起事件')
            }
            const mousemove = () => {
                console.log('鼠标移动事件')
            }
            const mouseover = () => {
                console.log('鼠标移入事件')
            }
            const mouseout = () => {
                console.log('鼠标移出事件')
            }
            const keydown = () => {
                console.log('键盘按下事件')
            }
            const keyup = () => {
                console.log('键盘抬起事件')
            }

            return {click,dblclick,focus,blur,change,select,mousedown,mouseup,mousemove,mouseover,mouseout,keydown,keyup}
        }
    }
    const app = createApp(config)
    app.mount('#app')
</script>
</body>
</html>